<template>
    <div class="main">
        <el-row :gutter="40">
            <!--左侧动态导航-->
            <el-col :span="6">
                <el-aside class="leftBox" style="width: 100%">
                    <div class="classification">
                        <el-menu class="el-menu-vertical-demo" :default-active="activePath" :default-openeds="openeds"
                            @select="handleSelect" :unique-opened='true'>
                            <label v-for="(item,index) in leftMenu" :key="item.name" @contextmenu="showMenu(index)">
                                <vue-context-menu :contextMenuData="contextMenuData" :transferIndex="transferIndex"
                                    @Handler1="Handler_A(item)" @Handler2="Handler_B(item)"></vue-context-menu>
                                <el-submenu :index="item.remark" v-if="item.children.length>0">
                                    <template slot="title">
                                        <i class="el-icon-document"></i>
                                        <span>{{item.groupname}}&nbsp;({{item.count}})</span>
                                    </template>
                                    <router-link :to="{name: item.remark,query:{routerKeyPath:routerKeyPath}}"
                                        style="text-decoraction: none;">
                                        <el-menu-item v-for="(children) in item.children" :key="children.id"
                                            :index="children.id.toString()">
                                            {{ children.name }}&nbsp;{{children.name == '添加分组'?'' : '('+children.count+')'}}
                                        </el-menu-item>
                                    </router-link>
                                </el-submenu>
                                <router-link :to="{name: item.remark,query:{routerKeyPath:routerKeyPath}}"
                                    style="text-decoraction: none;">
                                    <el-menu-item v-if="item.children.length==0" :index="item.remark">
                                        <template slot="title">
                                            <i class="el-icon-document"></i>
                                            <span>{{item.groupname}}</span>
                                        </template>
                                    </el-menu-item>
                                </router-link>
                            </label>
                        </el-menu>
                    </div>
                </el-aside>
            </el-col>
            <!-- 动态获取对应页面 -->
            <el-col :span="18" :offset="0">
                <router-view></router-view>
            </el-col>
        </el-row>
        <el-dialog title="分组管理" :visible.sync="dialogTableVisible">
            <el-table :data="groupManageData">
                <el-table-column label="分组名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align='center'>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editGroup(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="编辑分组" :visible.sync="editGroupV" width="20%" :show-close='false' center>
            <el-input type="text" placeholder="请输入新的分组名称" v-model="editGroupName" maxlength="20" minlength="2"
                show-word-limit>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editGroup('editGroupC')">取 消</el-button>
                <el-button type="primary" @click="editGroup('editGroup')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                flushTreeFlag: state => state.commonModule.flushTreeFlag,
                leftMenu: state => state.studentAnsweringModule.leftMenu,
            })
        },
        watch: {
            flushTreeFlag(val) {
                this.getConcernedTreeList();
            },
        },
        created(){
            this.activePath = this.$route.query.routerKeyPath[1]
            this.openeds = [this.$route.query.routerKeyPath[0]
            , this.$route.query.routerKeyPath[1]]
        },
        data() {
            return {
                editGroupName: '',
                editGroupV: false,
                groupManageData: [],
                dialogTableVisible: false,
                transferIndex: null, // Show the menu that was clicked
                contextMenuData: {
                    menuName: "demo",
                    axis: {
                        x: null,
                        y: null
                    },
                    menulists: [{
                        btnName: "分组管理",
                        fnHandler: "Handler1",
                    }]
                },
                activePath: '',
                openeds: [], // 导航栏默认展开列表
                groupName: "", // 组名称
                friendGoupDialog: false, // 好友分组对话框
                props: {
                    multiple: true
                },
                // leftMenu: [], //左侧动态菜单
                groupList: [{
                        value: 1,
                        label: "老师"
                    },
                    {
                        value: 2,
                        label: "同班"
                    },
                    {
                        value: 3,
                        label: "校友"
                    },
                    {
                        value: 4,
                        label: "最亲"
                    },
                    {
                        value: 5,
                        label: "学校"
                    }
                ], //好友分组列表
                friendGoupList: [], // 好友列表
                routerKeyPath: '',
                editGroupCash:{}
            };
        },
        mounted() {
            this.getConcernedTreeList();
        },
        methods: {
            handleDelete(params){
                this.$store.dispatch('studentAnsweringModule/groupDel',{
                    id: params.id
                }).then(res =>{
                    if(res.data.code ==200){
                        this.$message.success('删除成功')
                        this.groupManageData=this.groupManageData.filter(item => item.id != params.id)
                        this.getConcernedTreeList()
                    }else{
                        this.$message.warning(res.data.msg)
                    }
                })
                
            },
            editGroup(params){
                this.editGroupV = true
                if(params =='editGroupC'){
                    this.editGroupV = false
                    this.editGroupName = ''
                }else if(params =='editGroup'){
                    this.$store.dispatch('studentAnsweringModule/groupUpdate',{
                        id: this.editGroupCash.id,
                        name: this.editGroupName
                        }).then(res =>{
                        if(res.data.code ==200){
                            this.$message.success('修改成功')
                             this.groupManageData.map(item =>{
                                if(item.id ==this.editGroupCash.id){
                                    item.name = this.editGroupName
                                }
                            })
                            this.editGroupCash = {}
                            this.editGroupName = ''
                            this.getConcernedTreeList()
                            this.editGroupV = false
                        }else{
                            this.$message.warning(res.data.msg)
                            this.editGroupCash = {}
                            this.editGroupV = false
                        }
                    })
                }else{
                    this.editGroupName = params.name
                    this.editGroupCash = params
                }
            },
            showMenu(index) {
                this.transferIndex = index;
                // tranfer index to child component
                event.preventDefault();
                var x = event.clientX + 80;
                var y = event.clientY + 20;
                this.contextMenuData.axis = {
                    x,
                    y
                };
            },
            Handler_A(params) {
                this.dialogTableVisible = true
                this.groupManageData = params.children.filter(item => item.id > 15 && (item.id !=10000000  && item.id !=20000000 && item.id !=30000000))
            },

            //选择变化时 
            handleSelect(key, keyPath) {
                if (key == 10000000 || key == 20000000 || key == 30000000) {
                    this.$store.commit('commonModule/CHANGE_ADDGROUPFLAG')
                }
                this.routerKeyPath = keyPath
            },
            //添加分组确认框
            addFriendGroup() {
                this.$confirm("确认添加“" + this.groupName + "”分组？")
                    .then(_ => {})
                    .catch(_ => {});
            },

            // 获取左侧关注列表
            getConcernedTreeList() {
                this.$store.dispatch('studentAnsweringModule/concernedTreeList').then(res => {
                    // this.leftMenu = res.data.result;
                })
            },
            // 粉丝-已关注
            getAddFollow() {
                this.$store.dispatch('commonArticleModule/addFollow', this.user.userId).then(res => {
                })
            }
        },
    };
</script>

<style lang="scss" scoped>
    a {
        text-decoration: none;
    }

    .router-link-active {
        text-decoration: none;
    }

    .leftBox {
        background: #fff;
        padding: 5px;
        // width: 440px;

        .classification {
            box-sizing: border-box;

            .el-menu .el-menu .el-submenu,
            .el-menu {
                // min-width: 230px;
                text-align: left;
                border-right-width: 0;
            }

            .portrait {
                // margin: 10px;
                text-align: center;

                p {
                    margin: 0;
                    padding: 0
                }

                .carouselSpan {
                    font-size: 12px;
                    color: #375c04;
                }
            }
        }
    }

    .main {
        // min-height: 700px;
        overflow: hidden
    }

    .el-aside {
        overflow: hidden;
    }
</style>